<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <el-date-picker v-model="search.date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :size="size"  />
                <div class="search-input">员工</div>
                <el-select v-model="search.staff_id"  filterable placeholder="请选择员工" clearable>
                    <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
                <div class="search-input">岗位</div>
                <el-select v-model="search.job_id"  filterable placeholder="请选择岗位" clearable>
                    <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-header>
            <div class="right-panel-search">
                <el-button type="primary" @click="exports">导出</el-button>
                <el-button type="primary" @click="print">打印</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :data="table" stripe remoteSort remoteFilter border :summary-method="getSummaries" show-summary>
                <el-table-column fixed type="selection" width="80" align="center"></el-table-column>
                <el-table-column fixed label="员工姓名" align="center" width="150">
                    <template #default="{row}">
                        {{row.staff_name}}
                    </template>
                </el-table-column>
                <el-table-column fixed label="岗位" align="center" width="150">
                    <template #default="{row}">
                        {{row.job_name}}
                    </template>
                </el-table-column>
                <el-table-column v-for="(item,index) in tableData.header" :key="index" :label="item.date" align="center">
                    <el-table-column label="初版" :prop="item.first" align="center" width="170">
                        <template #default="{row}">
                            <div style="height: 150px;overflow: auto;">
                                <div v-if="row[item.first] && row[item.first].length>0" style="display: flex;flex-direction: column;align-items: center;height:100%">
                                    <div v-for="(item1,index1) in row[item.first]" :key="index1">
                                        {{item1+'\n' ? item1+'\n' : ""}}
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="修改版" :prop="item.edition" align="center" width="170">
                        <template #default="{row}">
                            <div style="height: 150px;overflow: auto;">
                                <div v-if="row[item.edition] && row[item.edition].length>0" style="display: flex;flex-direction: column;align-items: center;height:100%">
                                    <div v-for="(item1,index1) in row[item.edition]" :key="index1">
                                        {{item1+'\n' ? item1+'\n' : ""}}
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="放码" :prop="item.grading" align="center" width="170">
                        <template #default="{row}">
                            <div style="height: 150px;overflow: auto;">
                                <div v-if="row[item.grading] && row[item.grading].length>0" style="display: flex;flex-direction: column;align-items: center;height:100%">
                                    <div v-for="(item1,index1) in row[item.grading]" :key="index1">
                                        {{item1+'\n' ? item1+'\n' : ""}}
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column fixed="right" label="合计" prop="total_num" align="center" width="150"></el-table-column>
                <!-- <el-table-column type="selection" width="80" align="center"></el-table-column>
                <el-table-column label="员工姓名" prop="order_no" align="center"></el-table-column>
                <el-table-column label="岗位" prop="staff_name" align="center"></el-table-column>
                <el-table-column label="123">
                    <template #default="{row}">
                        <el-table-column v-for="(item,index) in row" :key="index" label="item.creator" align="center">
                            <el-table-column label="初版" prop="total_num" align="center"></el-table-column>
                            <el-table-column label="修改版" prop="total_num" align="center"></el-table-column>
                            <el-table-column label="放码" prop="total_num" align="center"></el-table-column>
                        </el-table-column>
                    </template>
                </el-table-column>
                <el-table-column label="合计" prop="total_num" align="center"></el-table-column> -->
            </scTable>
        </el-main>
    </el-container>
    <save-detail ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></save-detail>
</template>
<script>
import saveDetail from './saveDetail';
export default {
  components: { saveDetail },
	name: 'user',
	data() {
		return {
			dialog: {
				save: false,
			},
			// apiObj: this.$API.develop.edition.templateCounting,
			search: {
				date: null,
                staff_id:null,
                job_id:null,
			},
			//所需数据选项
			staffList: [],
            deptList:[],
            tableData:[],
            table:[]
		}
	},
	mounted() {
        this.getStaff()
        this.getDept()
        this.getTable()
	},
	methods: {
		//查看
		table_show(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("show").setData(row);
			});
		},
        // 导出
        async exports(){
            var res = await this.$API.develop.edition.devReport.get({staff_id:this.search.staff_id,job_id:this.search.job_id,date:this.search.date});
            const fileUrl = res.data.url;
            const link = document.createElement("a");
            link.href = fileUrl;
            link.download = fileUrl;
            link.click();
        },
		//搜索
		upsearch() {
			// this.$refs.table.upData(this.search)
            this.getTable({staff_id:this.search.staff_id,job_id:this.search.job_id,date:this.search.date})
            this.$refs.table.refresh()
		},
        handleSuccess(data, mode) {
			if (mode == 'over') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        //所有员工
        async getStaff(){
            var res = await this.$API.all.staff.get();
            this.staffList = res.data;
        },
        //所有岗位
        async getDept(){
            var res = await this.$API.all.dept.get();
            this.deptList = res.data;
        },
        async getTable(){
            var res = await this.$API.develop.edition.templateCounting.get({staff_id:this.search.staff_id,job_id:this.search.job_id,date:this.search.date});
            this.table = res.data.rows.list;
            res.data.rows.header.map(item=>{
                item.first = item.date + item.field[0]
                item.edition = item.date + item.field[1]
                item.grading = item.date + item.field[2]
            })
            this.tableData = res.data.rows;
        },
        getSummaries(param){
            const { columns, data } = param
            var sums = []
            columns.forEach((column, index) => {
                sums[index] = 0
                if (index === 0) {
                    sums[index] = '合计'
                    return
                }
                if (index === 1) {
                    sums[index] = ''
                    return
                }
                if (index === 2) {
                    sums[index] = ''
                    return
                }
                if(column.property != undefined){
                    data.map((item) => {
                        if(item[column.property] && item[column.property].constructor === Array && column.property != 'total_num'){
                            sums[index] += item[column.property].length
                        }else{
                            sums[index] += item[column.property]
                        }
                    })
                }
            })
            return sums
        },
	}
}
</script>

<style lang="scss">
.search-input {
	width: auto;
	font-size: 14px;
}
</style>
